<template>
  <div class="bg-fff bdr-10 pd-10">

    <el-menu :default-active="biddingMethod" mode="horizontal" class="bdr-top-10">
      <el-menu-item @click="getBills('')" index="">全部</el-menu-item>
      <el-menu-item @click="getBills('0')" index="0">一口价
        <v-plain-tips :num="offerTips.priceCount"/>
      </el-menu-item>
      <el-menu-item @click="getBills('1')" index="1">竞价
        <v-plain-tips :num="offerTips.biddingCount"/>
      </el-menu-item>
    </el-menu>
    <div class="bg-fff pd-10 fx-1 bdr-bottom-10">
      <div class="top">
        <el-radio-group v-model="inquiryStatus" @change="getBills(biddingMethod)">
          <el-radio-button :label="item.value" v-for="item in $dict.inquiryStatus" :key="item.value">{{item.label}}&nbsp;
            <v-plain-tips :num="offerTips.tobeAdjustedCount" v-if="item.value===2" class="tips"/>
            <v-plain-tips :num="offerTips.inInquiryCount" v-if="item.value===3" class="tips"/>
            <v-plain-tips :num="offerTips.employerQuotedCount" v-if="item.value===7" class="tips"/>
          </el-radio-button>
        </el-radio-group>
        <em class="fx-1"></em>
        <el-checkbox v-model="isCard" label="卡片模式" border></el-checkbox>
      </div>
      <div class="panel">
        <v-bill-card-offer-list v-if="isCard" :bills="bills" @change="change"
                                @adjPrice="showAdjustPriceByQuote"></v-bill-card-offer-list>
        <v-plain-table v-else :data="bills" @change="change">
          <template slot="expand" slot-scope="{scope}">
            <el-button type="text" @click="$router.push(`./detail/${scope.row.id}`)">详情</el-button>
            <el-button type="text" @click="$router.push(`./adjust-price/${scope.row.id}`)"
                       v-if="inquiryStatus===2 && scope.row.biddingMethod===0">调价
            </el-button>

          </template>
        </v-plain-table>
      </div>
    </div>
    <v-plain-dialog
            title="票据详情"
            width="60%"
            ref="detail">
      <v-bill-detail :bill="currentBillDetail"/>
    </v-plain-dialog>
    <v-plain-dialog
            title="票据详情"
            width="60%"
            ref="adj">
      <v-bill-detail :bill="currentBillDetail">
        <v-bill-adj :bill="currentBillDetail" @publishAdj="publishAdj"/>
      </v-bill-detail>
    </v-plain-dialog>
  </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'
  import vBillCardOfferList from '@/components/bill-card-offer-list'
  import vPlainTable from '@/components/plain-table'
  import vPlainDialog from '@/components/plain-dialog'
  import vBillDetail from '@/components/bill-detail'
  import vBillAdj from '@/components/bill-adj'
  import { Action, Getter } from 'vuex-class'
  import vPlainTips from '@/components/plain-tips'

  @Component({
    components: {
      vBillCardOfferList, vPlainTable, vPlainDialog, vBillDetail, vBillAdj, vPlainTips
    }
  })
  export default class Order extends Vue {
    inquiryStatus = ''
    biddingMethod = ''
    isCard = true
    bills: TableData = {
      header: [
        {
          key: 'billNumber',
          label: '票据号'
        },

        {
          key: 'faceValue',
          label: '票面金额'
        },
        {
          key: 'expiryDate',
          label: '到期日'
        },
        {
          key: 'billEveryDeduction',
          label: '期望每十万扣款'
        },
        {
          key: 'adjustmentEveryPlus',
          label: '调价后每十万扣款'
        },
        {
          key: 'adjustmentTransferAmount',
          label: '调价后转让额'
        },
        {
          key: 'inquiryStatus',
          label: '票据状态',
          formatter: row => this.$utils.toTypeFormat(row.inquiryStatus, this.$dict.tableInquiryStatus)
        }
      ],
      body: [],
      footer: {
        total: 0,
        currentPage: 1
      }
    }
    currentBillDetail = {}
    offer = {}

    get activeIndex () {
      return this.$route.path
    }

    getBillDetail (id) {
      return this.$axios.get(`b/boms/bill/${id}`)  as AjaxResponse
    }

    getBillInquiryDetail (id) {
      return this.$axios.get(`b/boms/inquiry/${id}`)  as AjaxResponse
    }

    getBillOfferDetail ({ billId, id }) {
      return this.$axios.post('b/boms/bill/detail', {
        billId, billQuoteId: id
      }) as AjaxResponse
    }

    async getBills (biddingMethod = '') {
      this.biddingMethod = biddingMethod
      let res: AjaxResponse = await this.$axios.post('b/boms/inquiry/inquirys', {
        pageSize: 10,
        currentPage: this.bills.footer.currentPage,
        inquiryStatus: this.inquiryStatus,
        biddingMethod: this.biddingMethod
      })
      if (res.responseCode === 200) {
        this.bills.body = res.data.items
        this.bills.footer.total = res.data.totalNum
      }
    }

    change (currentPage) {
      this.bills.footer.currentPage = currentPage
      this.getBills()
    }

    async showBillDetail ({ billId }) {
      let res: AjaxResponse = await this.getBillDetail(billId)
      if (res.responseCode === 200) {
        this.currentBillDetail = res.data
        this.$refs.detail.openDialog()
      }
    }

    async showAdjustPrice ({ id }) {
      let res: AjaxResponse = await this.getBillInquiryDetail(id)
      if (res.responseCode === 200) {
        this.currentBillDetail = res.data
        this.$refs.adj.openDialog()
      }
    }

    async showAdjustPriceByQuote (offer) {
      let res: AjaxResponse = await this.getBillOfferDetail(offer)
      if (res.responseCode === 200) {
        this.currentBillDetail = res.data
        this.offer = offer
        this.$refs.adj.openDialog()
      }
    }

    publishAdj (form, res) {
      if (this.currentBillDetail.biddingMethod === 0) {
        this.publishAdjByPrice(form, res)
      } else {
        this.publishAdjByQuote(form, res)
      }
    }

    async publishAdjByPrice (form, result) {
      /// 一口价
      let res: AjaxResponse = await this.$axios.post('b/boms/inquiry/adjustmentprice', {
        inquiryInformationId: this.currentBillDetail.id,
        billQuoteId: '', //
        priceAdjustMethod: 0, //
        adjustmentInterestRate: form.adjustInterestRate, //
        adjustmentEveryPlus: form.everyPlus, //
        adjustmentDiscountAmount: result.discountAmount, //
        adjustmentTransferAmount: result.transferAmount, //
        treasurerExpectedProfit: result.treasurerExpectedProfit,
        adjustYearRate: result.interestYear,
        billEveryDeduction: result.billEveryDeduction
      })
      this.$utils.tips(res)
    }

    async publishAdjByQuote (form, result) {
      let res: AjaxResponse = await this.$axios.post('b/boms/inquiry/adjustmentbidding', {
        inquiryInformationId: this.currentBillDetail.inquiryId,
        billQuoteId: this.currentBillDetail.billQuoteId, //
        priceAdjustMethod: 0, //
        adjustmentInterestRate: form.adjustInterestRate, //
        adjustmentEveryPlus: form.everyPlus, //
        adjustmentDiscountAmount: result.discountAmount, //
        adjustmentTransferAmount: result.transferAmount, //
        treasurerExpectedProfit: result.treasurerExpectedProfit,
        adjustYearRate: result.interestYear,
        billEveryDeduction: result.billEveryDeduction
      })
      this.$utils.tips(res)
    }

    @Action getOfferTips
    @Getter offerTips

    get tips () {
      return this.offerTips
    }

    mounted () {
      if(this.$route.query.type){
        this.inquiryStatus = this.$route.query.type
      }

      this.getBills()
      this.getOfferTips()
    }
  }
</script>

<style lang="less" scoped>
  .mh-100p {
    display: flex;
    flex-direction: column;
  }

  .bg-fff {
    margin-top: 10px;
  }

  .bg-fff {
    margin-top: 10px;
  }

  .top {
    display: flex;
    padding-bottom: 20px;
  }

  .operation {
    margin-top: 20px;
  }

  .el-pagination {
    float: right;
    margin-top: 20px;
  }

  .tips {
    position: absolute;
    right: 2px;
    top: 10px;
  }
</style>
